
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>成为会员</title>
	<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="black" name="apple-mobile-web-app-status-bar-style" />
	<meta content="telephone=no" name="format-detection" />
	<link href="css/style_vip.css" rel="stylesheet" type="text/css" />
	<script src="js/vue.js"></script>
</head>
<body>
<div id="el">
<section class="aui-flexView">
	<header class="aui-navBar aui-navBar-fixed">
		<!--<a href="javascript:;" class="aui-navBar-item">-->
		<a href="okpage.html" class="aui-navBar-item">
			<i class="icon icon-return"></i>
		</a>
		<div class="aui-center">
			<span class="aui-center-title">开通会员</span>
		</div>
		<a href="javascript:;" class="aui-navBar-item" >
			<i class="icon icon-sys"></i>
		</a>
	</header>
	<section class="aui-scrollView">
		<div class="aui-member-head">
			<div class="aui-flex">
				<!--添加用户头像和用户名-->
				<div class="aui-flex-user">
					<img :src="user.headUrl" alt="">
				</div>
				<div class="aui-flex-box aui-flex-box-top">
					<h2><span v-text="user.username"></span> <em>开通会员</em></h2>
				</div>
			</div>
			<div class="aui-member-box">
				<h1>
					<!--<img src="images/title.png" alt="">-->
				</h1>
				<div class="aui-palace">
					<a href="#" class="aui-palace-grid">
						<div class="aui-palace-grid-icon">
							<img src="images/icon-nav-001.png" alt="">
						</div>
						<div class="aui-palace-grid-text">
							<h2>会员折扣</h2>
							<p>购物多省</p>
						</div>
					</a>
					<a href="#" class="aui-palace-grid">
						<div class="aui-palace-grid-icon">
							<img src="images/icon-nav-002.png" alt="">
						</div>
						<div class="aui-palace-grid-text">
							<h2>分享赚双倍</h2>
							<p>购物多省200%</p>
						</div>
					</a>
					<a href="#" class="aui-palace-grid">
						<div class="aui-palace-grid-icon">
							<img src="images/icon-nav-003.png" alt="">
						</div>
						<div class="aui-palace-grid-text">
							<h2>每单最高额度</h2>
							<p>购物多省200%</p>
						</div>
					</a>
					<a href="#" class="aui-palace-grid">
						<div class="aui-palace-grid-icon">
							<img src="images/icon-nav-004.png" alt="">
						</div>
						<div class="aui-palace-grid-text">
							<h2>客服优先</h2>
						</div>
					</a>
					<a href="#" class="aui-palace-grid">
						<div class="aui-palace-grid-icon">
							<img src="images/icon-nav-005.png" alt="">
						</div>
						<div class="aui-palace-grid-text">
							<h2>提现优先</h2>
						</div>
					</a>
					<a href="#" class="aui-palace-grid">
						<div class="aui-palace-grid-icon">
							<img src="images/icon-nav-001.png" alt="">
						</div>
						<div class="aui-palace-grid-text">
							<h2>丢单速赔</h2>
						</div>
					</a>
				</div>

			</div>
		</div>

		<div class="aui-flex">
			<div class="aui-flex-box">
				<h2> <i class="icon icon-member"></i> 购买权益</h2>
			</div>
		</div>
		<div class="aui-flex-member-list">
			<ul class="aui-cho-box">

				<li class="aui-flex" v-for="meal in meals">
					<div class="aui-flex-time">
						<h1 v-text="meal.mealName"></h1>
					</div>
					<div class="aui-flex-box">
						<h2>原价 <em>￥<span v-text="meal.mealMoney*2"></span></em></h2>
					</div>
					<div class="aui-flex-tag">
						<h2><em>特惠</em> <span v-text="meal.mealMoney"></span></h2>
					</div>
				</li>
				<!--<li class="aui-flex">
					<div class="aui-flex-time">
						<h1>1个月</h1>
					</div>
					<div class="aui-flex-box">
					</div>
					<div>
						<h2>￥19</h2>
					</div>
				</li>
				<li class="aui-flex">
					<div class="aui-flex-time">
						<h1>试用15天 3单</h1>
					</div>
					<div class="aui-flex-box">
					</div>
					<div>
						<h2>￥5</h2>
					</div>
				</li>-->

			</ul>
			<h3><i class="icon icon-info"></i> 成为会员可享受各大权益</h3>
		</div>
		<div class="aui-member-get">
			<button>￥<span id="btn_price"></span> 购买权益</button>
		</div>
		<div class="aui-flex">
			<div class="aui-flex-box">
				<h3>高级权益可为您每年多节省 <em>≈2700元</em></h3>
			</div>
		</div>

		<div class="aui-list-box">
			<a href="#" class="aui-flex">
				<div class="aui-flex-box">
					<h5>无劵返利订单100笔/年</h5>
				</div>
				<div class="aui-flex-text">
					<p>返利加倍多返利 <em>900元</em></p>
				</div>
			</a>
			<a href="#" class="aui-flex">
				<div class="aui-flex-box">
					<h5>无劵返利订单100笔/年</h5>
				</div>
				<div class="aui-flex-text">
					<p>多奖励约 <em>1200元</em></p>
				</div>
			</a>
			<a href="#" class="aui-flex" style="border-bottom:none">
				<div class="aui-flex-box">
					<h5>无劵返利订单100笔/年</h5>
				</div>
				<div class="aui-flex-text">
					<p>多赚约 <em>600元</em></p>
				</div>
			</a>
		</div>

	</section>
</section>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">

	$(document).ready(function(e) {
		/*委托事件让套餐有选中的效果*/
		$(".aui-cho-box").on("click","li",function(){
			$(this).addClass("on").siblings().removeClass("on");
			$("#btn_price").text($(this).children().eq(2).children().eq(0).children().eq(1).text());
			tola();
		});
	});

	function tola() {
		var $li = $(".aui-cho-box").children("li.on");
		var money = $li.children("i").text();
		var count = $(".auiSks").val();
		$(".aui-total span").text(money * count);
	}

	var a=new Vue({
		el:"#el",
		data:{
			meals:[

			],
			user:{
				username:"guoguo",
				headUrl:"",
			}
		},
		created:function(){
			this.queryMeal();
			this.getUserInfo();
		},
		methods:{
			queryMeal:function(){
				var _this=this;
				$.ajax({
					url:"/weixin/user/queryMeal",
					data:{},
					dataType:"json",
					Type:"get",
					success:function (data) {
						console.log(data);
						if(data.li!=null){
							// console.log(data.li);
							// console.log(data.li[0].mealName);
							for (var i = 0;i<data.li.length;i++){
								_this.meals.push(data.li[i]);
							}
							console.log(_this.meals);
						}
					}
				})
			},
			//购买vip界面获取用户信息
			getUserInfo:function(){
				var _this=this;
				$.ajax({
					url:"/weixin/user/getUserInfo",
					data:{},
					dataType:"json",
					Type:"get",
					success:function (data) {
						console.log(data);
						_this.user.username = data.obj.username;
						_this.user.headUrl = data.obj.headUrl;
					}
				})
			}
		},
		computed:{
			// vip:function(){
			// 	if(this.user.lvId==1 || this.user.lvId==null ){
			// 		return true;
			// 	}else{
			// 		return false;
			// 	}
			// }
		}
	})

</script>
</html>
